<template>
<div class="whole">
  <div class="whole">
    <div class="custom-tree-container">
      <div class="block">
        <p>部门管理 <span class="tj" @click="xinshi()">添加部门</span></p>
        <el-tree
          :data="data"
          node-key="data.id"
          default-expand-all
          @node-click="huoqu"
          :expand-on-click-node="false"

          >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
            <span class="texta">
               <el-button type="text" size="mini" @click="xinshi()">
                添加子级部门
              </el-button>
              <el-button type="text" size="mini" @click="modifys()">
                修改部门名称
              </el-button>
              <el-button
                type="text"
                size="mini"
               @click="pandu()">
                删除此部门
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="mask" v-show="mask">
        <div class="list">
          <h4>新建部门</h4>
          <input type="text" v-model="sep" placeholder="部门编号">
          <input type="text" v-model="name" placeholder="部门名称">
          <input type="text" v-model="remark" placeholder="备注">
          <div>
            <button @click="add()">保存</button>
            <button @click="xinshi()">取消</button>
          </div>
        </div>
    </div>
    <div class="mask" v-show="modify">
        <div class="list">
          <h4>修改部门</h4>
          <input type="text" v-model="sep" placeholder="部门编号">
          <input type="text" v-model="name" placeholder="部门名称">
          <input type="text" v-model="remark" placeholder="备注">
          <div>
            <button @click="change()">保存</button>
            <button @click="modifys()">取消</button>
          </div>
        </div>
    </div>
    <div class="mask" v-show="pand">
      <div class="pd">
        <el-button type="danger" @click="delte()">确认</el-button>
        <el-button type="info" @click="pandu()">取消</el-button>
      </div>
    </div>
  </div>
</div>

</template>

<script>
import { orgAddApi, orgDelteApi, orgListlApi, orgUpdateApi } from '../../../apis/organApi'
export default {
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      mask: false,
      pand: false,
      modify: false,
      name: '',
      sep: '',
      remark: '',
      lista: ''
    }
  },
  created () {
    this.obtainList()
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    // 获取部门数据
    async obtainList () {
      const result = await orgListlApi()
      this.data = result.data.rows
      this.data = this.loop(this.data)
    },
    // 过滤方法
    loop (_list, _id) {
      return _list.filter((_it) => {
        if (_id === undefined) {
          if (_it.parent_id === null || _it.parent_id === '') return _it
        } else {
          if (_it.parent_id === _id) return _it
        }
      }).map((_item) => {
        if (_list.findIndex((_it) => _it.parent_id === _item.id) > -1) {
          _item.children = this.loop(_list, _item.id)
        } else {
          _item.children = []
        }
        return _item
      })
    },
    // 添加节点
    async add () {
      const resize = await orgAddApi({ name: this.name, seq: this.sep, remark: this.remark, parent_id: this.lista })
      if (resize.code !== 200) {
        this.$message({
          message: '添加节点失败',
          type: 'warning'
        })
      } else {
        this.$message({
          message: '添加完成',
          type: 'success'
        })
      }
      this.name = ''
      this.sep = ''
      this.remark = ''
      this.obtainList()
      this.mask = !this.mask
    },
    // 删除节点
    async delte () {
      console.log(this.lista)
      const resize = await orgDelteApi(this.lista)
      if (resize.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '删除失败',
          type: 'warning'
        })
      }
      this.obtainList()
      this.pand = !this.pand
    },
    // 修改部门
    async change () {
      const resize = await orgUpdateApi({ name: this.name, seq: this.sep, remark: this.remark, id: this.lista })
      if (resize.code === 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '修改失败',
          type: 'warning'
        })
      }
      this.name = ''
      this.sep = ''
      this.remark = ''
      this.obtainList()
      this.modify = !this.modify
    },
    xinshi () {
      this.mask = !this.mask
    },
    pandu () {
      this.pand = !this.pand
    },
    modifys () {
      this.modify = !this.modify
    },
    huoqu (data) {
      this.lista = data.id
    }
  }
}
</script>

<style lang="less" scoped>
.whole {
  width: 100%;
  height: calc(100% - 56px);
  padding: 10px;
  background-color: #fff;
  .tj {
    padding: 6px;
    margin-left: 20px;
    font-size: 12px;
    color: aliceblue;
    background-color: skyblue;
    border-radius: 8px;
  }
  .texta {
    margin-left: 40px;
  }
   .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(112, 112, 112, 0.373);
    position: absolute;
    top: 0;
    left: 0;
  }
  .pd {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 300px;
    height: 80px;
    padding: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    > button {
      width: 80px;
      height: 40px;
      margin-top: 10px;
    }
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 600px;
    height: 400px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    > input {
      width: 70%;
      height: 40px;
      font-size: 14px;
    }
    > div {
      button {
        width: 80px;
        height: 40px;
        font-size: 16px;
        margin-right: 40px;
      }
    }
  }
}
</style>
